<template>
  <view class="order">
    <z-paging
      ref="paging"
      autoShowBackToTop
      bg-color="#FAFAFAFF"
      cell-height-mode="dynamic"
      class="order-list"
      use-virtual-list
      @query="queryList"
    >
      <template #top>
        <u-tabs :list="list2" :scrollable="false" @change="tabsChange"></u-tabs>
      </template>
      <template #cell="{ item }">
        <MyCard :is-radius="false" class="order-item" padding="32rpx 40rpx" @tap.stop="routerOrderDetailsPath(item.id)">
          <view class="flex items-center justify-between">
            <view class="relative">
              <u-image :src="projectToPicture(item.orderPhoto)" height="120rpx" width="120rpx" />
              <view
                :class="`orderTypes-${item.orderType}`"
                class="absolute bottom-0 w-full text-center text-xs pt-1 pb-1"
              >
                {{ item.orderType_dictText }}
              </view>
            </view>
            <view class="flex-1 ml-2">
              <view class="font-bold mb-1 order-name">{{ item.orderName }}</view>
              <view class="text-xs text-gray-500">订单编号：{{ item.orderNo }}</view>
              <view class="text-xs text-gray-500">场馆地址：中国车谷全民健身中心-南馆</view>
            </view>
            <view class="flex flex-col items-center justify-between self-start">
              <view :class="`orderStatus-${item.orderStatus}`" class="text-xs">
                {{ item.orderStatus_dictText }}
              </view>
              <u-qrcode
                v-if="item.orderStatus === 5"
                ref="qrcodeCanvas"
                :size="30"
                :value="`https://szhy.artcollegehb.cn/sport/hexiao/#/pages/verification/scanList?id=${codeId(
                  item.sysOrderItemList
                )}`"
                canvas-id="qrcodeCanvas"
                @complete="complete"
                @tap.stop="remake"
              />
            </view>
          </view>
          <view
            v-for="(i, idx) in JSON.parse(item.orderBriefInfo || '[]')"
            :key="idx + 1"
            class="mb-0.5 text-xs session-list mt-2"
          >
            <text class="session-name">场次{{ idx + 1 }}</text>
            <text class="flex-1 line-clamp-1">{{ i.value }}</text>
            <!--<text>￥{{ i.price }}</text>-->
          </view>
          <view class="mt-5 flex items-center justify-between">
            <text class="text-xs order-time">{{ timeDays(item.createTime || '') }}</text>
            <view class="flex items-center">
              <u-button v-if="item.orderStatus === 1" plain shape="circle" size="small">取消订单</u-button>
              <u-button
                :custom-style="buttonCustomStyle"
                plain
                shape="circle"
                size="small"
                @tap.stop="toLocationPlace('军运展陈馆')"
              >
                一键导航
              </u-button>
            </view>
          </view>
        </MyCard>
      </template>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import MyCard from '@/components/MyCard/MyCard.vue';
import { RequestInterface } from '@/typings/request';
import { ORDER } from '@/api/order';
import { timeDays } from '../../utils/date';
import { PLACE_POINT } from '@/constants/base';
import { toLocation } from '@/utils/common';

const { proxy } = getCurrentInstance();
const $http: RequestInterface = inject('$http') as RequestInterface;
// tabs头部
const list2 = ref([
  {
    name: '全部',
    value: []
  },
  {
    name: '待使用',
    value: [2, 5]
  },
  {
    name: '待评价',
    value: [7]
  },
  {
    name: '退货/售后',
    value: [4, 6]
  }
]);

// button按钮
const buttonCustomStyle = {
  background: 'rgb(207, 248, 235)',
  color: '#0FDB99',
  marginLeft: '20rpx',
  border: 'none'
};

// 列表实例
const paging = ref(null);

// 订单列表
const orderList = ref([]);

// 订单状态列
const tabOrderStatus = ref([]);

// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
const tabsChange = (params) => {
  tabOrderStatus.value = params.value;
  paging.value.reload();
};

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (current, size) => {
  // 加载loading
  uni.showLoading({
    title: '订单加载中...',
    mask: true
  });
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
  $http.post({
    url: ORDER.PAGE_ORDER,
    data: {
      current,
      orderStatusList: tabOrderStatus.value,
      size
    },
    success: (res) => {
      orderList.value = res.list;
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
      paging.value.complete(res.list);
    },
    fail: () => {
      paging.value.complete(false);
      orderList.value = {};
    },
    complete: () => {
      uni.hideLoading();
    }
  });
};

// 路由跳转
const routerOrderDetailsPath = (id) => {
  console.log(id, 12312);
  uni.$u.route({
    url: '/pages/order/orderDetails',
    params: {
      id
    }
  });
};

const projectToPicture = (orderPhoto) => {
  const picture = JSON.parse(orderPhoto || '[]');
  if (picture.length) {
    return picture[0].path;
  }
  return '';
};

// 绘制二维码
const remake = () => {
  console.log(111, proxy);
  // 拿到组件实例
  proxy.$refs.qrcodeCanvas.toTempFilePath({
    success: (res) => {
      // 预览图片
      uni.previewImage({
        urls: [res.tempFilePath],
        success: (value) => {
          console.log(value);
        }
      });
    }
  });
};

// 场馆导航
const toLocationPlace = (name) => {
  toLocation({
    name, // 位置名字
    latitude: PLACE_POINT[name].lat, // 维度
    longitude: PLACE_POINT[name].lng, // 经度
    address: name // 地址详细说明
  }).then(() => {
    console.log('成功');
  });
};

const codeId = (list) => {
  console.log(list);
  if (list && list.length) {
    console.log(list.map((item) => item.itemProductId).join(','));
    return list.map((item) => item.itemProductId).join(',');
  }
  return '';
};

// 生成成功
const complete = (value) => {
  console.log(value, 2131231);
};
</script>

<style lang="scss">
.order {
  background-color: rgb(250, 250, 250);
  min-height: calc(100vh - var(--window-bottom));
  font-family: PingFang SC, PingFang SC;
  display: flex;
  flex-direction: column;

  .zp-list-cell {
    margin-top: 20rpx;
  }

  .order-list {
    flex: 1;
    overflow: auto;

    .order-name {
      color: #333333;
      font-size: 28rpx;
    }

    .session-list {
      color: #171726;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .session-name {
        color: #0064ff;
        margin-right: 20rpx;
      }
    }

    .order-time {
      color: #696975;
    }

    /*订单类型*/
    $orderTypeList: (
      0: #af5ddf,
      1: #ff94d8,
      2: #00b8ff
    );
    @each $key, $value in $orderTypeList {
      .orderTypes-#{$key} {
        background-color: $value;
        color: white;
      }
    }

    /*订单状态*/
    $orderStatus: (
      0: #0fdb99,
      1: #e6e9ef
    );
    @each $key, $value in $orderStatus {
      .orderStatus-#{$key} {
        color: $value;
      }
    }
  }
}
</style>
